<template>
  <div class="diy-signet-wrapper">
    <a-form layout="vertical">
      <a-form-item label="尺寸" name="width">
        <a-input-number class="w-full" disabled v-model:value="width" />
      </a-form-item>
      <a-form-item label="层级">
        <a-input-number
          class="w-full"
          v-model:value="currentComponent.style.zIndex"
        ></a-input-number>
      </a-form-item>
      <a-form-item class="form-item" label="主文字" name="companyName">
        <a-textarea
          allow-clear
          v-model:value="currentComponent.data.companyName"
          placeholder="请输入主文字"
        ></a-textarea>
      </a-form-item>
      <a-form-item class="form-item" label="底部文字" name="bottomText">
        <a-input
          allow-clear
          v-model:value="currentComponent.data.bottomText"
          placeholder="请输入底部文字"
        ></a-input>
      </a-form-item>
      <a-form-item class="form-item" label="中心五角星" name="showStar">
        <a-switch
          checked-children="显示"
          un-checked-children="关闭"
          v-model:checked="currentComponent.data.showStar"
        />
      </a-form-item>
      <a-form-item class="form-item" label="自定义颜色" name="color">
        <a-input type="color" v-model:value="currentComponent.data.color" />
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { useCertStore } from '@/stores'
import { computed, type Ref } from 'vue'
import { getPxValue, setPxValue } from '@/utils'
import DiySignet from '@/diy/config/DiySignet'
import { storeToRefs } from 'pinia'

const store = useCertStore()

const currentComponent: Ref<DiySignet> = storeToRefs(store).currentComponent as Ref<DiySignet>

//印章尺寸
const width = computed({
  get() {
    return getPxValue(currentComponent.value.style.width)
  },
  set(value: number) {
    currentComponent.value.style.width = setPxValue(value)
    currentComponent.value.style.height = setPxValue(value)
  }
})
</script>

<style scoped lang="less">
.reload {
  color: #a19e9e;
  margin-left: 12px;
  &:active {
    scale: 1.08;
  }
}
</style>
